<template>
    <div class="header ice-cream" :style="{ 'background-image': `url(${userInfo?.userImageAddress ?? basePhoto})` }">
        <div class="anime-header">
            <div class="anime-header-left-entry">
                <ul class="anime-header-list">
                    <li class="anime-header-list-element">
                        <div @click="gotoIndex" class="pointer">首页</div>
                    </li>
                </ul>
            </div>
            <div class="anime-header-center-Search">
                <el-input class="search" v-model.sync="Search" prefix-icon="el-icon-search" placeholder="请输入内容"
                    @change="setSearch"></el-input>
            </div>
            <div class="anime-header-right-entry">
                <ul class="anime-header-list">
                    <li class="anime-header-list-element">
                        <el-popover v-if="userInfo" placement="bottom" width="400" trigger="click">
                            <el-card class="box-card">
                                <div>
                                    <div class="cardCenter pointer" @click="showDialog(1)">
                                        <el-avatar size="medium" :src="userInfo.userImageAddress"></el-avatar>
                                    </div>
                                </div>
                                <div>
                                    <div class="cardCenter pointer" @click="showDialog(2)">
                                        <span>{{ userInfo.username }}</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="cardGrid pointer" @click="showDialog(3)">
                                        <div>出生日期：</div>
                                        <div>{{ userInfo.userBirthDay }}</div>
                                    </div>
                                </div>
                                <div>
                                    <div class="cardGrid pointer" @click="showDialog(4)">
                                        <div>性别：</div>
                                        <div>{{ userInfo.userGender ? "女" : "男" }}</div>
                                    </div>
                                </div>
                                <div>
                                    <div class="cardCenter pointer"><el-button type="text" style="color: red;"
                                            @click="backLogin">退出登录</el-button>
                                    </div>
                                </div>
                            </el-card>
                            <el-avatar size="small" :src="userInfo?.userImageAddress" class="pointer"
                                slot="reference"></el-avatar>
                        </el-popover>
                        <a v-else @click="gotoLogin" class="pointer">登录</a>
                    </li>
                    <li class="anime-header-list-element">
                        <div class="pointer" @click="gotoMessage">消息</div>
                    </li>
                    <li class="anime-header-list-element">
                        <div class="pointer" @click="gotoCollect">收藏</div>
                    </li>
                    <li class="anime-header-list-element">
                        <div class="pointer" @click="gotoHistory">历史记录</div>
                    </li>
                    <li class="anime-header-list-element">
                        <div class="pointer" @click="gotoUpload">创作</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="anime-header-background"></div>
        <teleport to="body">
            <el-dialog :title="['修改头像', '修改昵称', '修改年龄', '修改性别'][showType - 1]" :visible.sync="show" width="30%">
                <div v-if="showType == 1">
                    <el-upload class="avatar-uploader" action="/dev-api/web/api/v1/video/upload/image"
                        :show-file-list="false" :data="uploadData">
                        <img v-if="dialogData.imageUrl" :src="dialogData.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <div v-else-if="showType == 2">
                    <el-input placeholder="请输入内容" v-model="dialogData.input" clearable>
                    </el-input>
                </div>
                <div v-else-if="showType == 3">
                    <el-date-picker v-model="dialogData.value" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div v-else-if="showType == 4">
                    <el-radio v-model="dialogData.radio" label="0">男</el-radio>
                    <el-radio v-model="dialogData.radio" label="1">女</el-radio>
                </div>
                <span v-if="showType != 1" slot="footer" class="dialog-footer">
                    <el-button @click="show = false">取 消</el-button>
                    <el-button type="primary" @click="updata">确 定</el-button>
                </span>
            </el-dialog>
        </teleport>
    </div>
</template>

<script>
import Teleport from 'vue2-teleport'
import { change } from '@/api/user'
import morentupian from '@/assets/morentupian.jpg'
export default {
    components: {
        Teleport
    },
    props: ['search'],
    data() {
        return {
            basePhoto: morentupian,
            Search: '',
            userInfo: undefined,
            show: false,
            showType: 0,
            dialogData: {
                imageUrl: undefined,
                input: undefined,
                value: undefined,
                radio: undefined
            },
            uploadData: {

            }
        }
    },
    mounted() {
        this.userInfo = this.$store.getters.token
        if (this.$route.params.search) {
            this.Search = this.$route.params.search
        } else {
            this.Search = this.search
        }
    },
    methods: {
        updata() {
            const data = {
                userId: this.userInfo.userId,
                username: this.dialogData.input,
                userBirthDay: this.dialogData.value,
                userGender: this.dialogData.radio
            }
            change(data).then(res => {
                let userInfo = this.$store.getters.token
                switch (this.showType) {
                    case 2:
                        userInfo.username = data.username
                        break;
                    case 3:
                        userInfo.userBirthDay = data.userBirthDay
                        break;
                    case 4:
                        userInfo.userGender = data.userGender
                        break;
                }
                this.$store.commit('user/SET_TOKEN', userInfo)
                this.userInfo = this.$store.getters.token
                this.$message(res.errorMessage)
                this.show = false
            })
        },
        setSearch() {
            if (this.$route.path !== '/') {
                this.$router.push({ name: 'index', params: { search: this.Search } })
            } else {
                this.$emit('setSearch', this.Search)
            }
        },
        showDialog(index) {
            this.show = true
            this.showType = index
            this.dialogData.imageUrl = this.userInfo.userImageAddress
            this.dialogData.input = this.userInfo.username
            this.dialogData.value = this.userInfo.userBirthDay
            this.dialogData.radio = this.userInfo.userGender
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        backLogin() {
            localStorage.removeItem('userInfo')
            this.gotoLogin()
        },
        gotoLogin() {
            if (this.$route.path !== '/login') {
                this.$router.push({ path: '/login' })
            }
        },
        gotoUpload() {
            if (this.$route.path !== '/upload') {
                this.$router.push({ path: '/upload' })
            }
        },
        gotoIndex() {
            if (this.$route.path !== '/') {
                this.$router.push({ path: '/' })
            }
        },
        gotoHistory() {
            if (this.$route.path !== '/history') {
                this.$router.push({ path: '/history' })
            }
        },
        gotoMessage() {
            if (this.$route.path !== '/message') {
                this.$router.push({ path: '/message' })
            }
        },
        gotoCollect() {
            if (this.$route.path !== '/collect') {
                this.$router.push({ path: '/collect' })
            }
        },
        querySearchAsync() {

        },
        handleSelect() {

        }
    }
}
</script>

<style scoped>
.header {
    min-width: 1100px;
    margin: 0px;
}

.ice-cream {
    max-width: 2560px;
    box-sizing: border-box;
    display: block;
    min-width: 1100px;
    margin: 0 auto;
    padding: 0px;
    background-position: center;
    background-size: cover;
}

.anime-header {
    display: flex;
    height: 72px;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 1100px;
}

.anime-header-left-entry {
    margin: 0px;
    width: 300px;
    height: 72px;
}

.anime-header-center-Search {
    width: 350px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.anime-header-right-entry {
    margin: 0px;
    width: 600px;
    height: 72px;
}

.anime-header-list {
    height: 72px;
    margin: 0 10px;
    padding: 0px;
    display: flex;
    list-style-type: none;
    min-width: 1100px;
}

.anime-header-list .anime-header-list-element {
    margin: 20px 15px;
    display: flex;
    font-size: 15px;
    align-items: center;
}

.anime-header-list-element:hover {
    margin-top: 22px;
}

.anime-header-background {
    display: flex;
    height: 250px;
    background-color: transparent;
    background-position: 50% 25%;
    margin-top: -72px;
}

.pointer {
    color: black;
}

.pointer:hover {
    cursor: pointer;
    color: gray;
}

.box-card {
    background: transparent;
    border: none;
    backdrop-filter: blur(60px);
}

.box-card::v-deep>.el-card__body>div:nth-child(n+2) {
    margin-top: 5px;
}

.cardCenter {
    width: 100%;
    display: flex;
    justify-content: center;
}

.cardGrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.search {
    width: 100%;
}

.search::v-deep .el-input__inner {
    padding: 5px 15px 5px 30px;
    border-radius: 999px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>